
<template>
<div>
  <el-menu router style="border: none" :default-active="$route.path">
    <!--一级菜单-->
    <el-menu-item index="/">
      <template slot="title">
        <i class="el-icon-house"></i>
        <span>系统首页</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/element">Element页面</el-menu-item>
    <el-menu-item>系统首页</el-menu-item>
    <el-menu-item>系统首页</el-menu-item>
    <el-menu-item>系统首页</el-menu-item>

    <!--二级菜单-->
    <el-submenu>
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>商品管理</span>
      </template>
      <el-menu-item>商品管理</el-menu-item>
      <el-menu-item>商品发布</el-menu-item>
      <el-menu-item>评论管理</el-menu-item>
    </el-submenu>
  </el-menu>

  <!--  <el-col :span="12">-->
<!--    <div style="width: 100%; height: 300px; background-color: dodgerblue;"></div>-->
<!--  </el-col>-->
<!--  <el-col :span="12">-->
<!--    <div style="width: 100%; height: 300px; background-color: red;"></div>-->
<!--  </el-col>-->

  <el-row>
    <el-col :span="6">
    <div style="padding: 10px; border: 2px solid #ccc; text-align: center">
      <img style="width: 80%" src="@/assets/logo.png" alt="">
      <div style="text-align: center">这是一段文字</div>
      <div style="color: red">价格 ￥99.00</div>
    </div>
  </el-col>
    <el-col :span="6">
    <div style="padding: 10px; border: 2px solid #ccc; text-align: center">
      <img style="width: 80%" src="@/assets/logo.png" alt="">
      <div style="text-align: center">这是一段文字</div>
      <div style="color: red">价格 ￥99.00</div>
    </div>
  </el-col>
    <el-col :span="6">
    <div style="padding: 10px; border: 2px solid #ccc; text-align: center">
      <img style="width: 80%" src="@/assets/logo.png" alt="">
      <div style="text-align: center">这是一段文字</div>
      <div style="color: red">价格 ￥99.00</div>
    </div>
  </el-col>
    <el-col :span="6">
    <div style="padding: 10px; border: 2px solid #ccc; text-align: center">
      <img style="width: 80%" src="@/assets/logo.png" alt="">
      <div style="text-align: center">这是一段文字</div>
      <div style="color: red">价格 ￥99.00</div>
    </div>
  </el-col>
</el-row>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>
  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>
  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>
  <el-row style="margin-top: 10px">
    <el-col>
      <el-input style="width: 200px" v-model="value" placeholder="请输入内容..."></el-input>
      <el-input type="textarea" style="width: 200px" v-model="value1"></el-input>
      <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码..."></el-input>
      <el-input style="width: 200px" v-model="value2" placeholder="请输入内容..." prefix-icon="el-icon-search"></el-input>
      <el-input clearable style="width: 200px" v-model="value3" placeholder="请输入内容..." suffix-icon="el-icon-user"></el-input>
      <el-button>搜索</el-button>
    </el-col>
  </el-row>
  <el-row style="margin: 20px 0">
    <el-autocomplete clearable style="width: 300px" placeholder="请输入内容，我来帮你猜一猜..." :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value4"></el-autocomplete>
  </el-row>
  <el-row>
    <el-select v-model="select" @change="changeSelect">
      <el-option value="香蕉"></el-option>
      <el-option value="苹果"></el-option>
      <el-option value="菠萝"></el-option>
      <el-option value="橙子"></el-option>
    </el-select>
     <el-select v-model="select1">
       <el-option v-for="item in fruits" :key="item.id" :label="item.name" :value="item.name"></el-option>
    </el-select>
    <el-select v-model="select2" @change="changeSelectUsers" multiple>
      <el-option v-for="item in users" :key="item.card" :label="item.name" :value="item.card"></el-option>
    </el-select>

  </el-row>
</div>
</template>

<script>
export default {
  name: 'Element',
  data() {
    return {
      value: '',
      value1: '',
      value2: '',
      value3: '',
      password: '',
      value4: '',
      coffee: [{value: '1.星巴克咖啡'}, {value: '2.瑞幸咖啡'}, {value: '3.库迪咖啡'}],
      select: '',
      select1: '',
      select2: '',
      fruits: [
        {name:'香蕉',id:1},
        {name:'苹果',id:2},
        {name:'菠萝',id:3},
        {name:'橙子',id:4},
      ],
      users:[
        {name:'xx',card:'817241782617168734'},
        {name:'张三',card:'746394723628123871'},
        {name:'李四',card:'627346273627362736'},
        {name:'王五',card:'190190199019901910'},
      ]
    }
  },
  methods: {
    querySearch(query ,cb) {
      let result =  query ? this.coffee.filter(v => v.value.includes(query)) : this.coffee
      console.log(result)
      cb(result)
    },
    changeSelect(){
      console.log(this.value)
    },
    changeSelectUsers(){
      console.log(this.select2)
    }
  }

}
</script>
